<template >
    <div>
        <van-tabbar v-model="active" @change="onChange">
            <van-tabbar-item replace to="/" icon="wap-home-o">首页</van-tabbar-item>
            <van-tabbar-item to="/nearby" icon="location-o">附近</van-tabbar-item>
            <van-tabbar-item badge="33" to="/msg">
                <span>消息</span>
                <template #icon="props">
                    <img :src="props.active ? icon.active : icon.inactive" />
                </template>
            </van-tabbar-item>

            <van-tabbar-item icon="phone-o">打车</van-tabbar-item>
            <van-tabbar-item icon="user-o"  to="/Mine">我的</van-tabbar-item>
        </van-tabbar>
        
    </div>
</template>
<script lang="ts">
import { ref } from 'vue';
import { showToast } from 'vant';

export default {
    setup() {
        const active = ref(0);
        const icon = {
            active: 'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',
            inactive:
                'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',
        };
        const onChange = (index:number) =>{ 
            //showToast(`标签 ${index}`)
    };
        return {
            icon,
            active,
            onChange
        };
    },
};
</script>
<style lang="">
    
</style>